import {
  Avatar,
  Button,
  Col,
  Image,
  Input,
  Row,
  Select,
  Table,
  Tag,
} from "antd";
import moment from "moment";
import React, { FC, useEffect, useState } from "react";
import MyTitle from "../../components/Title";

import { roleList } from "../../utils";
import { Popconfirm } from "antd";
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom";
import { ajax } from "./../../api/index";
import { inject, observer } from "mobx-react";
import { baseURL } from "../../api/request";

const UserList: FC<any> = ({ uinfo, data }) => {
  const Navigate = useNavigate();
  const { userList, getUserListAsync, getUserList } = data;
  const { userInfo } = uinfo;
  // const [path, setPath] = useState<any>("");
  console.log(userInfo);

  const gotosetuser = (item: any) => {
    Navigate("/main/user/reset/" + item._id);
  };

  useEffect(() => {
    getUserListAsync();
  }, []);

  const confirmDel = async (item: any) => {
    let { code, result } = await ajax.userdelete({
      _id: item._id,
    });

    if (code == 200) {
      var list = userList.filter((v: any) => v._id != item._id);
      getUserList(list);
    }
  };
  // 表头
  const columns: any = [
    {
      title: "序号",
      render: (text: any, item: any, index: any) => {
        return index + 1;
      },
      align: "center",
      width: 80,
    },

    {
      title: "用户名",
      align: "center",
      // dataIndex:"username",
      render(value: any, item: any, index: any) {
        return <span> {value.username}</span>;
      },
    },

    {
      title: "用户头像",
      // dataIndex: "avatar",
      align: "center",
      width: 80,
      render(value: any, item: any, index: any) {
        return (
          <span>{<Image src={value.avatar.replace(/public/, baseURL)} />}</span>
        );
      },
    },
    {
      title: "用户创建时间",
      align: "center",
      dataIndex: "time",
      render(value: any, item: any, index: any) {
        return <span> {moment(value).format("YYYY-MM-DD HH:mm")} </span>;
      },
    },

    {
      title: "用户权限",
      align: "center",
      // dataIndex:"role",
      render(value: any, item: any, index: any) {
        return (
          <Tag color={roleList.find((item) => item.value == value.role)?.color}>
            {roleList.find((item) => item.value == value.role)?.label}
          </Tag>
        );
      },
    },

    {
      title: "操作",
      align: "center",
      width: 240,
      render(value: any, item: any, index: any) {
        return (
          <span>
            {userInfo.role >= item.role && (
              <Popconfirm
                title="确定删除吗?"
                onConfirm={() => confirmDel(item)}
                okText="删除"
                cancelText="取消"
              >
                <Button size="small" danger style={{ margin: "0 10px" }}>
                  删除
                </Button>
              </Popconfirm>
            )}

            {userInfo.username == item.username && (
              <Button
                onClick={() => gotosetuser(item)}
                size="small"
                type="primary"
              >
                修改
              </Button>
            )}
          </span>
        );
      },
    },
  ];
  return (
    <div>
      <MyTitle text="用户列表" />

      <Row style={{ marginTop: 20 }}>
        <Col span={23} offset={1}>
          <Table
            dataSource={userList}
            columns={columns}
            rowKey={(item: any) => item._id}
            sticky
            bordered
            id="mytable"
            pagination={{ pageSize: 6 }}
          ></Table>
        </Col>
      </Row>
    </div>
  );
};

export default inject("data", "uinfo")(observer(UserList));
